<template>
  <div class="app-user">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <el-form
          ref="form"
          :model="queryObject"
          :inline="true"
          class=" demo-form-inline"
        >
          <el-form-item label="手机号" prop="phone">
            <el-input v-model="queryObject.phone"></el-input>
          </el-form-item>

          <el-form-item label="注册时间" prop="rangeDate">
            <el-date-picker
              v-model="queryObject.rangeDate"
              type="daterange"
              start-placeholder="开始时间"
              end-placeholder="结束时间"
              value-format="yyyy-MM-dd">
            </el-date-picker>
          </el-form-item>

          <el-form-item>
            <el-button @click="reset" :disabled="isLoading">重置</el-button>
            <el-button type="primary" @click="onSubmit" :disabled="isLoading">提交</el-button>
          </el-form-item>
        </el-form>
      </div>

      <div v-loading="isLoading">
        <el-table
          :data="users"
          border
          style="width: 100%">

          <el-table-column
            prop="id"
            label="用户ID">
          </el-table-column>

          <el-table-column
            label="头像"
            width="100"
            align="center">
            <template slot-scope="scope">
              <img width="30px"
                   :src="scope.row.portrait || 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png'">
            </template>
          </el-table-column>

          <el-table-column
            prop="name"
            label="用户名"
            align="center">
          </el-table-column>
          <el-table-column
            prop="phone"
            label="手机号">
          </el-table-column>

          <el-table-column
            label="注册时间">
            <template slot-scope="scope">
              {{scope.row.createTime | dateFormat}}
            </template>
          </el-table-column>

          <el-table-column
            label="状态">
            <template slot-scope="scope">
              <el-switch
                v-model="scope.row.status"
                active-value="ENABLE"
                inactive-value="DISABLE"
                active-color="#13ce66"
                inactive-color="#ff4949"
                @change="changeUserStatus(scope.row)">
              </el-switch>
            </template>
          </el-table-column>

          <el-table-column
            label="操作"
            width="180"
            align="center">
            <template slot-scope="scope">
              <el-button type="text" size="small" @click="allocRole(scope.row)">分配角色</el-button>
            </template>
          </el-table-column>
        </el-table>

        <pagination
          :query-object="queryObject"
          :loadPage="loadUserList"
          @pageChange="pageChange"
          :total="total"
        ></pagination>

        <alloc-role
          :dialog-form-visible="isDialogVisible"
          :user-id="userId"
          @close="closeDialog"></alloc-role>

      </div>
    </el-card>
  </div>
</template>

<script>
  import { getUserPages } from '@/services/user'
  import { dateFormat } from '@/utils/util'
  import Pagination from '@/components/Pagination'
  import AllocRole from './components/alloc-role'

  export default {
    name: 'UserIndex',
    data() {
      return {
        users: [],
        queryObject: {
          phone: '',
          startCreateTime: '',
          endCreateTime: '',
          rangeDate: [],
          page: 1,
          size: 10,
        },
        total: 0,
        isLoading: false,
        isDialogVisible: false,
        userId: undefined,
      }
    },
    created() {
      this.loadUserList()
    },
    methods: {
      async loadUserList() {
        this.isLoading = true
        const queryObject = {
          startCreateTime: this.queryObject.rangeDate[0],
          endCreateTime: this.queryObject.rangeDate[1],
          phone: this.queryObject.phone,
          currentPage: this.queryObject.page,
          pageSize: this.queryObject.size
        }
        const { code, data } = await getUserPages(queryObject)
        if (code === '000000') {
          this.users = data.records
          this.total = data.total
        }
        this.isLoading = false
      },
      reset() {
        this.$refs.form.resetFields()
        this.queryObject.page = 1
        this.loadUserList()
      },
      onSubmit() {
        this.queryObject.page = 1
        this.loadUserList()
      },
      changeUserStatus(row) {
        console.log(row)
      },
      pageChange({ page, size }) {
        this.queryObject.page = page
        if (size) this.queryObject.size = size
      },
      allocRole(row) {
        this.isDialogVisible = true
        this.userId = row.id
      },
      closeDialog() {
        this.isDialogVisible = false
        this.userId = undefined
      },
    },
    filters: {
      dateFormat,
    },
    components: {
      Pagination, AllocRole,
    }
  }
</script>

<style lang="scss" scoped>
</style>
